<template>
	<view>
		<topAlert title="您的信息将在百焕商圈全渠道展示，预计触达10万以上用户" />

		<view class="wrap safe-area flex column align-center">
			<view class="wrap-white-bg">
				<block v-for="(item, index) in list" :key="index">
					<rowInput
						:item="item"
						v-model="dataInfo[item.key]"
						v-if="item.type === 'input' && item.direct === 'row'"
					/>

					<columnInput
						:item="item"
						v-model="dataInfo[item.key]"
						v-else-if="item.type === 'input' && item.direct === 'column'"
					/>

					<wrapUpload :item="item" v-model="dataInfo[item.key]" v-else-if="item.type === 'upload' && item.isShow" />
					
					<wrapFile :item="item" v-model="dataInfo[item.key]" v-else-if="item.type === 'file' && item.isShow" />
					
					<wrapVideo :item="item" v-model="dataInfo[item.key]" v-else-if="item.type === 'video' && item.isShow" />

					<wrapTextarea :item="item" v-model="dataInfo[item.key]" v-else-if="item.type === 'textarea'" />

					<listChoose
						:item="item"
						:isRadio="item.isRadio"
						v-model="dataInfo[item.key]"
						v-else-if="item.type === 'listChoose'"
					/>

					<columnGroup
						:item="item"
						v-model="dataInfo[item.key]"
						v-else-if="item.type === 'group' && item.direct === 'column'"
					/>
					
					<rowGroup
						:item="item"
						v-model="dataInfo[item.key]"
						v-else-if="item.type === 'group' && item.direct === 'row'"
					/>

					<wrapDistance
						:item="item"
						:area.sync="dataInfo.area"
						:lat.sync="dataInfo.lat"
						:lng.sync="dataInfo.lng"
						v-model="dataInfo[item.key]"
						v-else-if="item.type === 'distance' && item.isShow"
					/>

					<areaList
						:item="item"
						v-model="dataInfo[item.key]"
						v-else-if="item.type === 'area' && item.isShow"
					/>
				</block>
			</view>

			<view class="wrap-white-bg">
				<block v-for="(item, index) in contactList" :key="index">
					<block v-if="item.type === 'input' && item.direct === 'row'">
						<rowInput :item="item" v-model="dataInfo[item.key]" />
					</block>
				</block>
			</view>

			<block v-if="beforeInfo === null">
				<view class="sure-btn theme-gradient-btn f-34" @click="onPublish">确认发布</view>
			</block>
			
			<block v-else>
				<view class="wrap-article-btn flex align-center just-between">
					<view class="delete-btn f-34 flex align-center just-center" @click="onDelete">
						<image class="delete-img" :src="$staticImagePath('article/delete.png')" />
						
						<view>删除</view>
					</view>
					
					<view class="save-btn theme-gradient-btn f-34" @click="onSave">保存</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import { getArticleLabels, publishArticle, DelArticle, EditArticle } from "@/API/article.js";
	import topAlert from "@/components/common/topAlert.vue";
	import rowInput from "@/components/form/rowInput.vue";
	import columnInput from "@/components/form/columnInput.vue";
	import wrapUpload from "@/components/form/upload.vue";
	import wrapTextarea from "@/components/form/textarea.vue";
	import listChoose from "@/components/form/listChoose.vue";
	import wrapDistance from "@/components/form/distance.vue";
	import areaList from "@/components/form/areaList.vue";
	import columnGroup from "@/components/form/columnGroup.vue";
	import wrapVideo from "@/components/form/video.vue";
	import wrapFile from "@/components/form/videoFile.vue";
	import rowGroup from "@/components/form/rowGroup.vue";

	export default {
		components: {
			topAlert,
			rowInput,
			columnInput,
			wrapUpload,
			wrapTextarea,
			listChoose,
			wrapDistance,
			areaList,
			columnGroup,
			wrapVideo,
			wrapFile,
			rowGroup
		},
		props: {
			/**
			 * 文章分类ID
			 */
			articleCategoryID: {
				type: String,
				default: "",
			},
			/**
			 * 之前填写过的信息
			 */
			beforeInfo: {
				type: Object,
				default: null
			}
		},
		watch: {
			beforeInfo: {
				"dataInfo.release_type": {
					handler(newVal, oldVal) {
						if (oldVal !== undefined && (this.beforeInfo === null || this.isBefore)) {
							this.dataInfo.area = "";
							this.dataInfo.lat = "";
							this.dataInfo.lng = "";
						}
					},
					immediate: true,
				},
				handler() {
					if (this.beforeInfo !== null) {
						Object.keys(this.dataInfo).forEach(key => {
							if (key === "content") {
								this.dataInfo.content = this.beforeInfo.content_original;
							} else {
								this.dataInfo[key] = this.beforeInfo[key];
							}
						})
						setTimeout(() => {
							this.isBefore = true;
						}, 1000);
					}
				},
				immediate: true,
			}
		},
		data() {
			return {
				contactList: [
					{
						title: "联系人姓名",
						require: true,
						type: "input",
						key: "link_name",
						place: "请输入联系人姓名",
						mode: "text",
						maxlength: 20,
						tips: "请输入联系人姓名",
						direct: "row",
					},
					{
						title: "联系人电话",
						require: true,
						type: "input",
						key: "link_mobile",
						place: "请输入联系人手机号",
						mode: "tel",
						maxlength: 11,
						direct: "row",
						tips: "请输入联系人手机号",
					},
				],

				dataInfo: {
					article_type: "1",
					type: "2",
					title: "", //标题
					content: "", //内容
					image: "", //封面图片
					video: "", //视频地址
					images: "", //图片
					label_id: "", //标签ID
					link_name: "", //联系人姓名
					link_mobile: "", //联系人手机号
					release_type: "0", //发布位置
					range: "", //发布范围
					area: "", //发布区域
					lat: "",
					lng: "",
					is_spread: "0",
				},

				labelList: [],
				isBefore: false, 
			};
		},
		mounted() {
			this.getData();
		},
		computed: {
			list() {
				return [
					{
						title: "发布类型",
						require: true,
						type: "group",
						direct: "row",
						key: "article_type",
						tips: "请选择发布类型",
						list: [
							{ id: "0", title: "图文" },
							{ id: "1", title: "视频" },
						],
					},
					{
						title: "标题",
						require: true,
						type: "input",
						key: "title",
						place: "请输入标题",
						mode: "text",
						maxlength: 100,
						tips: "请输入标题",
						direct: "column",
					},
					{
						title: "图片",
						require: false,
						type: "upload",
						key: "images",
						tips: "请上传图片",
						isShow: this.dataInfo.article_type === "0",
					},
					// {
					// 	title: "上传封面图",
					// 	require: false,
					// 	type: "file",
					// 	key: "image",
					// 	tips: "请上传封面图",
					// 	isShow: this.dataInfo.article_type === "1",
					// },
					{
						title: "上传视频",
						require: true,
						type: "video",
						key: "video",
						tips: "请上传视频",
						isShow: this.dataInfo.article_type === "1",
					},
					{
						title: "信息描述",
						require: true,
						type: "textarea",
						key: "content",
						place: "例如：卖房租房描述房屋信息等！~",
						mode: "text",
						maxlength: -1,
						tips: "请输入信息描述",
					},
					{
						title: "信息标签",
						require: true,
						type: "listChoose",
						key: "label_id",
						isRadio: false,
						list: this.labelList,
						tips: "请选择信息标签",
					},
					{
						title: "选择发布位置",
						require: true,
						type: "group",
						direct: "column",
						key: "release_type",
						tips: "请选择发布位置",
						list: [
							{ id: "0", title: "按距离" },
							{ id: "1", title: "按区域（可多选区域）" },
						],
					},
					{
						title: "选择发布距离",
						require: true,
						type: "distance",
						key: "range",
						tips: "请选择发布距离",
						list: [
							{ id: "1", title: "1km" },
							{ id: "2", title: "3km" },
							{ id: "3", title: "5km" },
							{ id: "4", title: "10km" },
						],
						isShow: this.dataInfo.release_type === "0",
					},
					{
						title: "选择发布区域",
						require: true,
						type: "area",
						key: "area",
						tips: "请选择发布区域",
						isShow: this.dataInfo.release_type === "1",
					},
				];
			},
		},
		methods: {
			/**
			 * 删除
			 */
			onDelete() {
				DelArticle(this.beforeInfo.id).then(res => {
					this.$st.success("删除成功", () => {
						uni.navigateBack();
					})
				})
			},
			/**
			 * 保存
			 */
			onSave() {
				if (this.$filters.judgeFormData(this.list, this.dataInfo)) {
					if (this.dataInfo.release_type === "0" && this.dataInfo.area === "") {
						this.$st.show("请选择发布位置的中心点");
						return;
					}
					
					if (this.$filters.judgeFormData(this.contactList, this.dataInfo)) {
						let obj = {...this.dataInfo};
						obj.article_category_id = this.articleCategoryID;
						obj.article_id = this.beforeInfo.id;
						
						this.$throttle(() => {
							EditArticle(obj).then((res) => {
								this.$st.success("修改成功", () => {
									uni.navigateBack();
								});
							})
						})
					};
				}
			},
			/**
			 * 发布
			 */
			onPublish() {
				if (this.$filters.judgeFormData(this.list, this.dataInfo)) {
					if (this.dataInfo.release_type === "0" && this.dataInfo.area === "") {
						this.$st.show("请选择发布位置的中心点");
						return;
					}

					if (this.$filters.judgeFormData(this.contactList, this.dataInfo)) {
						let obj = this.dataInfo;
						obj.article_category_id = this.articleCategoryID;
						
						this.$throttle(() => {
							publishArticle(obj).then((res) => {
								this.$st.success("发布成功", () => {
									this.$jump.paySuccess("article");
								});
							})
						})
					}
				}
			},
			/**
			 * 网络请求
			 */
			getData() {
				getArticleLabels().then((res) => {
					this.labelList = res.data;
				});
			},
		},
	};
</script>

<style>
	@import "@/css/publish.css";
</style>
